<template>
	<el-row :gutter="20" justify='space-between'>


		<el-col :span="24"  class="userBox">
			
			<el-dropdown class="userDropdown" >
				
				<span><el-icon size="20"><UserFilled /></el-icon>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>

				<template #dropdown>
					<el-dropdown-menu>
						<!-- <el-dropdown-item>个人信息</el-dropdown-item> -->
						<el-dropdown-item @click="userOut">退出</el-dropdown-item>
					</el-dropdown-menu>
				</template>

			</el-dropdown>
		</el-col>
	</el-row>


</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const userOut =  () => {
	localStorage.removeItem("Token");
	localStorage.removeItem("menus");
	sessionStorage.removeItem("editable");
	router.push('/LoginPage'); // 
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-menu {
		justify-content: space-between
	}
	.userBox{
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		height: 60px;
	}
	.userDropdown{
		width: 100px;height: 60px; cursor:pointer;margin-left: 10px;
		line-height: 60px;
	}
</style>